<!--
 * @Author: xiaxia
 * @Description: 
 * @Date: 2024-05-22 11:04:53
 * @LastEditTime: 2024-06-03 09:35:06
 * @FilePath: \vue-admin-template\src\views\print\clodopPrint\index.vue
-->
<template>
  <div class="app-container">
    <el-form label-width="80px" :model="printForm">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="打印机:">
            <el-select v-model="printForm.printer" placeholder="请选择">
              <el-option
                v-for="item in dyjOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="打印方式:">
            <el-select v-model="printForm.path" placeholder="请选择">
              <el-option
                v-for="item in dyPaths"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="纸张方向:" prop="paperDir">
            <el-select v-model="printForm.paperDir" placeholder="请选择">
              <el-option
                v-for="item in dirList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <div>
                  {{ item.label }}
                  <di style="color: #b4b4b4; font-size: 12px">{{ item.detail }}</di>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="纸张大小:" prop="paperSize">
            <el-select v-model="printForm.paperSize" placeholder="请选择">
              <el-option
                v-for="item in sizeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row>
        <el-form-item label="打印边距:" prop="">
          <el-col :span="6">
            <el-form-item label="左边距">
              <el-input
                v-model.trim="printForm.leftMargin"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="上边距">
                <el-input
                  v-model.trim="printForm.topMargin"
                  placeholder=""
                ></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-row>
      <el-button type="primary" @click="hPrint('0')">打印预览</el-button>
      <el-button type="primary" @click="hPrint">直接打印</el-button>

      <Prints
        ref="print"
        :printer="printForm.printer"
        :path="printForm.path"
        :top-margin="printForm.topMargin"
        :left-margin="printForm.leftMargin"
        :dy-number="printForm.dyNumber"
        :paper-dir="printForm.paperDir"
        :paper-size="printForm.paperSize"
      ></Prints>
    </el-form>
  </div>
</template>

<script>
import {getLocalPrint} from '@/utils/printjs'
import Prints from '@/components/tool/Prints.vue'
export default {
  name: 'ClodopPrint',
  components: {
    Prints
  },
  data() {
    return {
      printForm: {
        printer: '', // 打印机
        paperDir: '1', // 纸张方向
        paperSize: '1', // 纸张大小
        leftMargin: '', // 左边距
        topMargin: '', // 上边距
        dyNumber: 1, // 打印份数
        path: '1', // pdf打印 || img打印
      },
      dirList: [
        { value: '1',label: '纵向' },
        { value: '2',label: '横向' },
        // { value: '0',label: '自动',detail:'明细<=8条横向,其余纵向' },
      ],
      sizeList: [
        { value: '1',label: 'A4' },
        { value: '2',label: 'A5' },
      ],
      dyPaths: [
        { value: '1',label: 'pdf打印' },
        { value: '2',label: 'img打印' },
      ]
    }
  },
  created() {
    this.getLocalPrint() // 获取本地打印机并保存
    if (localStorage.getItem('printForm')) {//打印表达
      this.printForm = JSON.parse(localStorage.getItem('printForm'))
    }
  },
  computed: {
    dyjOptions() { 
      if (!localStorage.getItem('dyjOptions')) {//未缓存打印设置
        return this.$root.dyjOptions
      } else {
        return this.addprinter.concat(this.$root.dyjOptions)
      }
    },
  },
  methods: {
    // 获取本地打印机
    getLocalPrint() {
      // 获取本地打印机
      this.$root.dyjOptions = getLocalPrint()// 将打印机存在项目里
      if (localStorage.getItem('dyjOptions')) this.addprinter = JSON.parse(localStorage.getItem('dyjOptions'))
    },
    // 打印 & 打印预览
    hPrint(val) {
      if(val==0) { // 打印预览
        this.$refs.print.hprints(val)
      } else { // 直接打印
        this.$refs.print.hprints()
      }
    },
  }
}
</script>

<style>

</style>